<template>
  <div class="product-manage" >
    <!--    <el-button type="primary" @click="showAddDialog">添加商品</el-button>-->
    <el-table  highlight-current-row :data="agricultures"  style="width: 100%">
      <el-table-column prop="aid" label="资讯编号" width="250" ></el-table-column>
      <el-table-column  label="资讯图片">
        <template slot-scope="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.image"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="资讯标题"></el-table-column>
        <el-table-column prop="message" label="资讯内容" @click="detail()"  :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column prop="username" label="发布者"></el-table-column>
      <el-table-column prop="time" label="发布时间" >
      </el-table-column>
      <el-table-column width="150" label="操作">

        <template slot-scope="scope">

          <el-button size="small"  type="danger" @click="deleteProduct(scope.row,scope.$index,agricultures)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="详情" :visible.sync="detailDialogVisible">
      <div slot="footer" class="dialog-footer">
        {{this.message}}
        <el-button @click="hidenDetail">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'

export default {
  data() {
    return {
      search_key:'',
      agricultures: [],
      categories: [],
      categories2: [],
      message:'',
      addDialogVisible: false,
      detailDialogVisible:false
    }
  },
  mounted() {
    this.getAgricultures()
    // this.getCategories()
    // this.getCategories2()

  },
  methods: {
    hidenDetail(){
      this.detailDialogVisible=false
    },
    detail(){
      console.log("demo")
      // this.detailDialogVisible=true
      //
      // this.message=row.message


    },

    getTagType(value) {
      if (value === "y") {
        return 'success';
      } else if (value === "n") {
        return 'warning';
      } else {
        return '';
      }
    },
    getOrderState(value) {
      if (value === "y") {
        return '订单完成';
      } else if (value === "n") {
        return '未完成';
      } else {
        return '';
      }
    },
    getAgricultures() {
      axios.get('http://localhost:8088/user_b/findAllAgricultureVO')
          .then(response => {
            console.log(response.data.data)
            this.agricultures = response.data.data
            // this.categories=response.data.categories
          })
          .catch(error => {
            console.log(error)
          })
    },
    getCategories() {
      axios.get('http://localhost:8088/commodity_b/findAllCategories')
          .then(response => {
            this.categories = response.data.data
          })
          .catch(error => {
            console.log(error)
          })
    },
    showAddDialog() {
      this.addDialogVisible = true
    },
    deleteProduct(agriculture,index,rows) {
      MessageBox.confirm('此操作将永久删除该资讯, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            axios.delete('http://localhost:8088/user_b/delAgricultureByAID',{params:{
                aid:agriculture.aid
              }})
                .then(() => {
                  // this.getProducts()
                  rows.splice(index,1);
                  Message.success('删除成功')
                })
                .catch(error => {
                  console.log(error)
                })
          })
          .catch(() => {
            // do nothing
          })
    }
  }
}
</script>

<style scoped>

.ellipsis-column {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height:  150px;
}
.product-manage { padding: 20px; } </style>
